<template>
  <div class="test-step-content">
    <div class="content-wrapper">
      <!-- 左侧信息区 -->
      <div class="left-content">
        <!-- 基本信息 -->
        <div class="module basic-info">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">1</span>
            <h2 class="page-title">基本信息</h2>
          </div>
          <div class="info-grid">
            <div class="grid-row">
              <div class="grid-label">老人姓名：</div>
              <div class="grid-value">{{ elder.name || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">老人身份证号：</div>
              <div class="grid-value">{{ elder.idCard || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">性别：</div>
              <div class="grid-value">{{ elder.gender || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">出生日期：</div>
              <div class="grid-value">{{ elder.birthDate || "未获取" }}</div>
            </div>
            <div class="grid-row">
              <div class="grid-label">详细住址：</div>
              <div class="grid-value">{{ elder.address || "未获取" }}</div>
            </div>
          </div>
        </div>

        <!-- 健康状况 -->
        <div class="module health-status">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">2</span>
            <h2 class="page-title">健康状况</h2>
          </div>

          <!-- 疾病和用药情况 -->
          <div class="sub-module disease-info">
            <h4>疾病和用药情况</h4>
            <div class="grid-row">
              <div class="grid-label">疾病诊断：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(disease, idx) in assessment.diseaseDiagnosis
                    ?.selected || []"
                  :key="idx"
                >
                  {{ disease }}
                </el-tag>
                <span
                  class="extra-info"
                  v-if="!assessment.diseaseDiagnosis?.selected?.length"
                  >无疾病记录</span
                >
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">用药情况：</div>
              <div class="grid-value">
                <table class="med-table">
                  <thead>
                    <tr>
                      <th>药物名称</th>
                      <th>服药方法</th>
                      <th>用药剂量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(med, idx) in assessment.medicationInfo?.list ||
                      []"
                      :key="idx"
                    >
                      <td>{{ med.drugName || "-" }}</td>
                      <td>{{ med.usage || "-" }}</td>
                      <td>{{ med.dosage || "-" }}</td>
                    </tr>
                    <tr v-if="!assessment.medicationInfo?.list?.length">
                      <td colspan="3" style="text-align: center; color: #999">
                        无用药记录
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- 近30天风险事件 -->
          <div class="sub-module risk-events">
            <h4>近30天内风险事件</h4>
            <div class="grid-row">
              <div class="grid-label">跌倒：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.跌倒 === '发生过3次以上'
                      ? 'danger'
                      : ''
                  "
                >
                  {{ assessment.riskFactors?.跌倒 || "未发生" }}
                </el-tag>
              </div>
              <div class="grid-label">走失：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.走失 === '发生过3次以上'
                      ? 'danger'
                      : ''
                  "
                >
                  {{ assessment.riskFactors?.走失 || "未发生" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">噎食：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.噎食 === '发生过3次以上'
                      ? 'danger'
                      : assessment.riskFactors?.噎食 === '发生过两次'
                      ? 'warning'
                      : ''
                  "
                >
                  {{ assessment.riskFactors?.噎食 || "未发生" }}
                </el-tag>
              </div>
              <div class="grid-label">自杀：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.自杀 === '发生过3次以上'
                      ? 'danger'
                      : ''
                  "
                >
                  {{ assessment.riskFactors?.自杀 || "未发生" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">昏迷：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  :class="
                    assessment.riskFactors?.昏迷 === '发生过3次以上'
                      ? 'danger'
                      : ''
                  "
                >
                  {{ assessment.riskFactors?.昏迷 || "未发生" }}
                </el-tag>
              </div>
            </div>
          </div>

          <!-- 身体健康情况 -->
          <div class="sub-module body-health">
            <h4>身体健康情况</h4>
            <div class="grid-row">
              <div class="grid-label">伤口情况：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(wound, idx) in assessment.woundCondition?.selected ||
                  []"
                  :key="idx"
                >
                  {{ wound }}
                </el-tag>
                <span
                  class="extra-info"
                  v-if="!assessment.woundCondition?.selected?.length"
                  >无伤口记录</span
                >
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">特殊医疗照护情况：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(care, idx) in assessment.specialMedicalCare
                    ?.selected || []"
                  :key="idx"
                >
                  {{ care }}
                </el-tag>
                <span
                  class="extra-info"
                  v-if="!assessment.specialMedicalCare?.selected?.length"
                  >无特殊照护需求</span
                >
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">自理能力：</div>
              <div class="grid-value">
                <el-tag size="mini" class="tag-item">
                  {{ assessment.selfCareAbility?.result || "未评估" }}
                </el-tag>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">痴呆前兆：</div>
              <div class="grid-value">
                <el-tag
                  size="mini"
                  class="tag-item"
                  v-for="(symptom, idx) in assessment.dementiaPrecursors
                    ?.selected || []"
                  :key="idx"
                >
                  {{ symptom }}
                </el-tag>
                <span
                  class="extra-info"
                  v-if="!assessment.dementiaPrecursors?.selected?.length"
                  >无痴呆前兆</span
                >
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">其他：</div>
              <div class="grid-value">
                {{ assessment.otherConditions?.content || "无其他信息" }}
              </div>
            </div>
          </div>

          <!-- 近期体检报告 -->
          <div class="sub-module medical-report">
            <h4>近期体检报告</h4>
            <div class="grid-row">
              <div class="grid-label">体检报告：</div>
              <div class="grid-value">
                <span>{{
                  assessment.medicalReport?.fileName || "健康评估报告.png"
                }}</span>
                <el-button
                  type="text"
                  size="mini"
                  @click="viewReport"
                  v-if="assessment.medicalReport?.url"
                >
                  查看
                </el-button>
                <span v-else style="color: #999">无报告链接</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 能力状况 -->
        <div class="module ability-status">
          <div class="title-box">
            <span class="badge" style="background-color: #f56c6c">3</span>
            <h2 class="page-title">能力状况</h2>
          </div>
          <div class="sub-module ability-assessment">
            <h4>能力评估结果</h4>
            <div class="grid-row">
              <div class="grid-label">各指标分数(分)</div>
              <div class="grid-value">
                <span class="aa"
                  >自理能力得分:
                  {{ abilityData.selfCareAbility?.模块总分 || 0 }}</span
                >
                <span class="aa"
                  >精神状态得分:
                  {{ abilityData.mentalStatus?.模块总分 || 0 }}</span
                >
                <span class="aa"
                  >感知觉与社会参与得分:
                  {{
                    abilityData.perceptionSocialParticipation?.模块总分 || 0
                  }}</span
                >
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">评估总分(分)</div>
              <div class="grid-value">
                {{
                  (abilityData.selfCareAbility?.模块总分 || 0) +
                  (abilityData.mentalStatus?.模块总分 || 0) +
                  (abilityData.perceptionSocialParticipation?.模块总分 || 0)
                }}
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力初步等级</div>
              <div class="grid-value">
                {{ report.preliminaryAbilityLevel || "未评估" }}
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力等级变更依据</div>
              <div class="grid-value">
                <template
                  v-if="
                    report.levelChangeBasis?.selected?.[0] ||
                    (report.otherBasis?.content &&
                      report.otherBasis.content !== '暂无')
                  "
                >
                  <el-tag
                    size="mini"
                    class="tag-item"
                    v-if="report.levelChangeBasis?.selected?.[0]"
                  >
                    {{ report.levelChangeBasis.selected[0] }}
                  </el-tag>
                  <el-tag
                    size="mini"
                    class="tag-item"
                    v-if="
                      report.otherBasis?.content &&
                      report.otherBasis.content !== '暂无'
                    "
                  >
                    其他：{{ report.otherBasis.content }}
                  </el-tag>
                </template>
                <span class="extra-info" v-else>无变更依据</span>
              </div>
            </div>
            <div class="grid-row">
              <div class="grid-label">能力最终等级</div>
              <div class="grid-value">
                <el-tag size="mini" class="tag-item danger">
                  {{ report.finalAbilityLevel || "未评估" }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧审批区 -->
      <div class="right-content">
        <!-- 右侧审批区 - 审批结果卡片（修改后） -->
        <el-card class="approval-card">
          <h3>审批结果</h3>
          <div class="approval-result">
            <div class="result-item">
              <div class="result-label">审批结果：</div>
              <div class="result-value">
                <el-tag
                    size="medium"
                    style="background-color: #f56c6c;color: #fff;"
                >
                  {{ approveStatus || "未审批" }}
                  <!-- 变量名匹配，赋值后即可显示 -->
                </el-tag>
              </div>
            </div>
            <div class="result-item">
              <div class="result-label">审批意见：</div>
              <div class="result-value">{{ opinion || "无意见" }}</div>
              <!-- 变量名匹配，赋值后即可显示 -->
            </div>
          </div>
        </el-card>

        <el-card class="record-card">
          <h3>操作记录</h3>
          <ul class="record-list">
            <li>
              <div class="record-item">
                <div class="record-icon"></div>
                <div class="record-content">
                  <p>评估中-健康信息录入</p>
                  <p>{{ lastName }} (已完成)</p>
                </div>
                <div class="record-time">{{ lastTime }}</div>
              </div>
            </li>
            <li>
              <div class="record-item">
                <div class="record-icon"></div>
                <div class="record-content">
                  <p>审批-入住审批</p>  
                  <p>审批员A (已拒绝)</p>
                </div>
                <div class="record-time">{{ currentTime }}</div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
     <!-- 返回按钮 -->
     <div class="btn-area">
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getElderly1 } from "@/api/system/elderly";
import { getAssessment } from "@/api/healthassess/assessment";
import { getReport } from "@/api/assessreport/report";
import { getAbility } from "@/api/abilityassess/ability";
import {
  updateAccraditationrecord,
  getUniqueRecord,
} from "@/api/accraditationrecord/accraditationrecord";
import { getUser } from "@/api/system/user";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";

// 路由与用户信息
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
// 2. 定义变量存储审批意见和状态（与模板中使用的变量名对应）
const opinion = ref("");
const approveStatus = ref("");
// 页面参数与数据存储
const finalStepNum = ref(0);
const finalElderlyId = ref(0);
const elder = ref({});
const assessment = ref({});
const report = ref({});
const abilityData = ref({
  selfCareAbility: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
  mentalStatus: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
  perceptionSocialParticipation: { 得分明细: {}, 模块总分: 0, 评估结果: {} },
});
// 返回按钮事件
const handleBack = () => {
  router.back(); // 返回上一页
  console.log("点击了返回");
};
// 操作记录相关
const currentTime = ref("");
const lastTime = ref("");
const userId = ref("");
const lastName = ref("");
let timer = null;

// 审批表单
const approvalForm = ref({
  auditStatus: "",
  opinion: "",
});
const approvalFormRef = ref(null);
const emit = defineEmits(["goBack", "submitSuccess"]);

// 初始化参数
const initParams = () => {
  const queryStepNum = Number(route.query.stepNum) || 0;
  const queryElderlyId = Number(route.query.elderlyId) || 0;

  console.log("URL参数原始值：", { queryStepNum, queryElderlyId });

  if (queryStepNum <= 0 || queryElderlyId <= 0) {
    ElMessage.error(
      `参数无效：stepNum=${queryStepNum}，elderlyId=${queryElderlyId}（需为正整数）`
    );
    return false;
  }

  finalStepNum.value = queryStepNum;
  finalElderlyId.value = queryElderlyId;
  console.log("参数初始化成功：", {
    finalStepNum: finalStepNum.value,
    finalElderlyId: finalElderlyId.value,
  });
  return true;
};

// 时间格式化
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 查询老人基本信息
const queryElderlyInfo = async () => {
  try {
    console.log("查询老人信息，ID：", finalElderlyId.value);
    const res = await getElderly1(finalElderlyId.value);
    elder.value = res.data || {};
    console.log("老人信息查询结果：", elder.value);
  } catch (error) {
    console.error("老人信息查询失败：", error);
    ElMessage.error(
      `老人信息查询失败：${error.response?.data?.msg || "服务器错误"}`
    );
  }
};

// 查询健康评估
const queryHealthAssessment = async () => {
  try {
    console.log("查询健康评估，老人ID：", finalElderlyId.value);
    const res = await getAssessment(finalElderlyId.value);
    const parsedData = {
      ...res.data,
      dementiaPrecursors: JSON.parse(res.data?.dementiaPrecursors || "{}"),
      diseaseDiagnosis: JSON.parse(res.data?.diseaseDiagnosis || "{}"),
      medicalReport: JSON.parse(res.data?.medicalReport || "{}"),
      medicationInfo: JSON.parse(res.data?.medicationInfo || "{}"),
      otherConditions: JSON.parse(res.data?.otherConditions || "{}"),
      riskFactors: JSON.parse(res.data?.riskFactors || "{}"),
      selfCareAbility: JSON.parse(res.data?.selfCareAbility || "{}"),
      specialMedicalCare: JSON.parse(res.data?.specialMedicalCare || "{}"),
      woundCondition: JSON.parse(res.data?.woundCondition || "{}"),
    };
    assessment.value = parsedData;
    console.log("健康评估查询结果：", assessment.value);
  } catch (error) {
    console.error("健康评估查询失败：", error);
    ElMessage.error(
      `健康评估查询失败：${error.response?.data?.msg || "服务器错误"}`
    );
  }
};

// 查询评估报告
const queryAssessReport = async () => {
  try {
    console.log("查询评估报告，老人ID：", finalElderlyId.value);
    const res = await getReport(finalElderlyId.value);
    console.log("评估报告原始数据：", res.data);

    // 处理时间和用户信息
    lastTime.value = res.data?.createTime || "无";
    userId.value = res.data?.creator || "";

    if (userId.value && !isNaN(Number(userId.value))) {
      const userRes = await getUser(Number(userId.value));
      lastName.value = userRes.data?.nickName || "未知用户";
      console.log("创建人信息：", lastName.value);
    } else {
      lastName.value = "无记录";
      console.log("无有效创建人ID，不查询用户信息");
    }

    // 解析评估报告数据
    let levelChangeBasis = { selected: [] };
    if (res.data?.levelChangeBasis) {
      try {
        levelChangeBasis = JSON.parse(res.data.levelChangeBasis);
      } catch (e) {
        console.error("levelChangeBasis解析失败：", e);
      }
    }

    let otherBasis = { content: "暂无" };
    if (res.data?.otherBasis) {
      try {
        otherBasis = JSON.parse(res.data.otherBasis);
      } catch (e) {
        console.error("otherBasis解析失败：", e);
      }
    }

    report.value = {
      ...res.data,
      levelChangeBasis,
      otherBasis,
    };
    console.log("评估报告解析结果：", report.value);
  } catch (error) {
    console.error("评估报告查询失败：", error);
    ElMessage.error(
      `评估报告查询失败：${error.response?.data?.msg || "服务器错误"}`
    );
  }
};

// 查询能力评估
const queryAbilityAssessment = async () => {
  try {
    console.log("查询能力评估，老人ID：", finalElderlyId.value);
    const res = await getAbility(finalElderlyId.value);
    console.log("能力评估原始数据：", res.data);

    // 解析能力评估数据
    const defaultSelfCare =
      '{"得分明细":{"eat":0,"bath":0,"groom":0},"模块总分":0,"评估结果":{}}';
    const defaultMental =
      '{"得分明细":{"memory":0,"judgment":0,"moodStability":0},"模块总分":0,"评估结果":{}}';
    const defaultPerception =
      '{"得分明细":{"sense":0,"communication":0,"socialParticipation":0},"模块总分":0,"评估结果":{}}';

    abilityData.value = {
      ...res.data,
      selfCareAbility: JSON.parse(res.data?.selfCareAbility || defaultSelfCare),
      mentalStatus: JSON.parse(res.data?.mentalStatus || defaultMental),
      perceptionSocialParticipation: JSON.parse(
        res.data?.perceptionSocialParticipation || defaultPerception
      ),
      mentalStatusScore: res.data?.mentalStatusScore || 0,
    };
    console.log("能力评估解析结果：", abilityData.value);
  } catch (error) {
    console.error("能力评估查询失败：", error);
    ElMessage.error(
      `能力评估查询失败：${error.response?.data?.msg || "服务器错误"}`
    );
  }
};

// 提交审批信息
const queryInfo = async () => {
  try {
    const elderId = finalElderlyId.value;
    if (!elderId) {
      console.warn("缺少老人ID，无法提交审批");
      ElMessage.warning("参数错误，无法提交审批");
      return;
    }

    // 获取当前审批记录
    const recordResponse = await getUniqueRecord({
      stepNo: 2,
      checkContentId: elderId,
    });
    const recordData = recordResponse.data || {};
    console.log("当前审批记录：", recordData);

    if (!recordData.id) {
      console.warn("未找到有效的审批记录");
      ElMessage.warning("未找到对应的审批记录");
      return;
    }

    // 构造更新数据
    const updateData = {
      id: recordData.id,
      auditStatus: approvalForm.value.auditStatus,
      opinion: approvalForm.value.opinion, // 补充缺失的意见字段
      stepNo: 4,
      finishTime: currentTime.value,
      currentStep: "入住配置",
      nextStep: "签约办理",
      handleType:
        approvalForm.value.auditStatus === "通过" ? "已审批" : "已拒绝",
    };

    // 提交更新
    const updateResponse = await updateAccraditationrecord(updateData);
    if (updateResponse.code === 200) {
      console.log("审批提交成功：", updateResponse.data);
      ElMessage.success("审批已提交");
    } else {
      console.error("审批提交失败：", updateResponse.msg);
      ElMessage.error(`提交失败：${updateResponse.msg}`);
    }
  } catch (error) {
    console.error("审批提交出错：", error);
    ElMessage.error(`操作失败：${error.message || "网络错误"}`);
  }
};

// 查看体检报告
const viewReport = () => {
  if (assessment.value.medicalReport?.url) {
    window.open(assessment.value.medicalReport.url, "_blank");
  } else {
    ElMessageBox.alert("无有效报告链接", "提示", {
      confirmButtonText: "确定",
      type: "info",
    });
  }
};

// 提交按钮事件
const handleSubmit = async () => {
  const isValid = await approvalFormRef.value.validate();
  if (!isValid) return;

  await queryInfo();

  if (["拒绝", "驳回"].includes(approvalForm.value.auditStatus)) {
    router.push("/togetherwork/togetherwork1/myapply");
    ElMessage.warning(`审批已${approvalForm.value.auditStatus}，即将跳转...`);
  } else {
    ElMessage.success(`步骤${finalStepNum.value}（入住审批）提交成功！`);
    emit("submitSuccess");
  }
};

// 返回按钮事件
const handleGoBack = () => emit("goBack");

// 组件生命周期
onMounted(() => {
  // 从URL query中获取参数，赋值给变量
  opinion.value = route.query.opinion || "无意见";
  approveStatus.value = route.query.approveStatus || "未审批";

  // 打印验证是否拿到值（调试用）
  console.log("从URL获取的审批意见：", opinion.value);
  console.log("从URL获取的审批状态：", approveStatus.value);

  console.log("当前登录用户：", userStore.nickName);
  const isParamsValid = initParams();

  if (isParamsValid) {
    // 并行请求提升加载速度
    Promise.all([
      queryElderlyInfo(),
      queryHealthAssessment(),
      queryAssessReport(),
      queryAbilityAssessment(),
    ])
      .then(() => {
        console.log("所有数据加载完成");
      })
      .catch((err) => {
        console.error("数据加载出错：", err);
      });
  }

  // 初始化并启动时间定时器
  currentTime.value = formatTime(new Date());
  timer = setInterval(() => {
    currentTime.value = formatTime(new Date());
  }, 1000);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
});

// 监听参数变化（如果页面支持动态刷新）
watch(
  () => [route.query.stepNum, route.query.elderlyId],
  () => {
    initParams();
  }
);
</script>
  
  <style scoped>
/* 全局布局 */
.test-step-content {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 20px;
}

.content-wrapper {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}
/* 返回按钮区域样式 */
.btn-area {
  text-align: center; /* 按钮居中 */
}

/* 左侧信息区 */
.left-content {
  flex: 1;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.module {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 标题样式 */
.title-box {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* 栅格布局 */
.info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}

.grid-label {
  width: 160px;
  text-align: right;
  margin-right: 12px;
  color: #666;
}

.grid-value {
  color: #333;
  flex: 1;
  line-height: 1.5;
}

/* 子模块样式 */
.sub-module {
  margin-bottom: 24px;
}

.sub-module h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  border-left: 3px solid #67c23a;
  padding-left: 6px;
}

/* 标签样式 */
.tag-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 4px;
  padding: 4px 8px;
  border: 1px solid #409eff;
  border-radius: 4px;
  background: #fff;
  color: #409eff;
}

.tag-item.warning {
  border-color: #e6a23c;
  color: #e6a23c;
}

.tag-item.danger {
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 辅助文本 */
.extra-info {
  color: #999;
  margin-left: 8px;
}

/* 用药表格 */
.med-table {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  margin-top: 4px;
}

.med-table th,
.med-table td {
  border: 1px solid #ebeef5;
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
}

.med-table thead {
  background: #f8f9fa;
}

.med-table th {
  font-weight: 500;
}

/* 右侧审批区 */
.right-content {
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.approval-card,
.record-card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 操作记录 */
.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.record-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #409eff;
  margin: 4px 8px 0 0;
}

.record-content {
  width: 300px;
  margin: 0 12px;
  color: #333;
}

.record-content p {
  margin-top: -4px;
  margin-bottom: 8px;
}

.record-time {
  width: 220px;
  text-align: right;
  color: #999;
  font-size: 13px;
}

/* 底部按钮 */
.btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.mr-3 {
  margin-right: 12px;
}

.aa {
  margin-right: 110px;
}
</style>